<template>
  <view class="content">
    <view class="text-area">
      <view class="describes aaaa">
        <uni-file-picker
          v-model="fileList"
          :auto-upload="false"
          fileMediatype="all"
          @select="afterRead"
          @delete="delFile"
          limit="1"
        >
          <view class="file-content">
            <image class="navBar-avatar" src="@/static/icon/add.svg" mode="scaleToFill" />
          </view>
        </uni-file-picker>
      </view>
      <view class="btn">
        <view class="submit" @tap="submit"> 确定选择 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      fileList: []
    }
  },
  onLoad() {},
  methods: {
    submit() {
      if (this.fileList.length == 0)
        return uni.showToast({
          title: '请输入内容',
          icon: 'none'
        })
      this.blobUrlToBase64(this.fileList)
        .then(base64 => {
          uni.webView.postMessage({
            data: {
              action: base64
            }
          })
          // 这里你可以使用 base64 数据
        })
        .catch(error => {
          console.error('处理过程中出错:', error)
        })
    },
    // 文件上传
    afterRead(file) {
      // console.log(file.tempFilePaths);
      this.fileList.push(file.tempFilePaths)
      console.log(this.fileList)
    },
    async blobUrlToBase64(blobUrl) {
      try {
        // 1. 使用 fetch 获取 blob 数据
        const response = await fetch(blobUrl)
        const blob = await response.blob()

        // 2. 创建一个 FileReader 来读取 blob 数据
        return new Promise((resolve, reject) => {
          const reader = new FileReader()

          reader.onloadend = () => {
            // 3. 获取 base64 结果（去掉前面的 data:*/*;base64, 前缀）
            const base64Data = reader.result.split(',')[1]
            resolve(base64Data)
          }

          reader.onerror = reject

          // 4. 开始读取 blob 数据为 base64
          reader.readAsDataURL(blob)
        })
      } catch (error) {
        console.error('转换失败:', error)
        throw error
      }
    },
    // 删除文件
    delFile(e) {
      this.fileList.splice(e.index, 1)
      console.log(this.fileList)
    }
  }
}
</script>

<style lang="scss">
.btn {
  position: fixed;
  bottom: 20rpx;
  width: 99%;
  display: flex;
  justify-content: center;
}

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 670rpx;
  height: 80rpx;
  background: inherit;
  background-color: #016fa0;
  border: none;
  border-radius: 10rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #fff;
  font-family: '微软雅黑', sans-serif;
}

.aaaa {
  /* width: 220rpx; */
  /* height:500rpx; */
  border: 1px solid #f3f3f3;
  .file-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 200rpx;
    height: 200rpx;
    background: #f7f8fa;

    .navBar-avatar {
      width: 64rpx;
      height: 72rpx;
    }
  }

  .input-padding {
    padding-left: 0px !important;
  }

  .file-picker__progress {
    display: none !important;
  }

  .icon-del-box {
    width: 18px;
    height: 18px;
    top: 1px;
    right: 1px;
  }

  .is-input-border {
    border: 0 !important;
  }

  .uni-easyinput__content-textarea {
    font-size: 24rpx;
    color: #aaaaaa;
    text-align: left;
  }
}
</style>
